// src/components/forum/TrackDiscussion.jsx
import React, { useEffect, useState } from 'react';
import { Link } from 'react-router-dom';
import { getItem, setItem } from '../../utils/localStorage';
import { useAuth } from '../../contexts/AuthContext';

const TrackDiscussion = () => {
  const [posts, setPosts] = useState([]);
  const { user } = useAuth();

  useEffect(() => {
    // Initialize track discussion posts if they don't exist
    const storedPosts = JSON.parse(getItem('track_discussion_posts') || '[]');
    if (storedPosts.length === 0) {
      const initialPosts = [
        {
          id: 1,
          title: '上海国际赛道弯道技巧详解',
          content: '详细分析上海国际赛道每个弯道的最佳进入点和出弯技巧...',
          author: 'trackmaster',
          views: 1560,
          replies: 42,
          createdAt: '2024-02-18T09:15:00Z',
          tags: ['上海赛道', '技术指导', '弯道技巧']
        },
        {
          id: 2,
          title: '珠海赛道雨天驾驶攻略',
          content: '分享在珠海国际赛车场雨天驾驶的经验和注意事项...',
          author: 'raindriver',
          views: 980,
          replies: 25,
          createdAt: '2024-02-17T14:20:00Z',
          tags: ['珠海赛道', '雨天驾驶', '安全指南']
        }
      ];
      setItem('track_discussion_posts', JSON.stringify(initialPosts));
      setPosts(initialPosts);
    } else {
      setPosts(storedPosts);
    }
  }, []);

  return (
    <div className="space-y-6">
      <div className="flex justify-between items-center">
        <div>
          <h1 className="text-2xl font-bold text-gray-900">赛道攻略</h1>
          <p className="mt-1 text-gray-600">
            分享赛道驾驶经验、技巧和各赛道特点
          </p>
        </div>
        {user && (
          <Link
            to="/forum/tracks/new"
            className="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700"
          >
            分享经验
          </Link>
        )}
      </div>

      <div className="bg-white rounded-lg shadow-md overflow-hidden">
        <div className="divide-y">
          {posts.map((post) => (
            <div key={post.id} className="p-6">
              <div className="space-y-3">
                <div className="flex justify-between items-start">
                  <h2 className="text-xl font-semibold">
                    <Link
                      to={`/forum/tracks/post/${post.id}`}
                      className="hover:text-blue-600"
                    >
                      {post.title}
                    </Link>
                  </h2>
                  <span className="text-sm text-gray-500">
                    {post.views} 浏览 · {post.replies} 回复
                  </span>
                </div>
                <div className="text-gray-600 line-clamp-2">{post.content}</div>
                <div className="flex items-center justify-between">
                  <div className="flex items-center space-x-2">
                    {post.tags.map((tag, index) => (
                      <span
                        key={index}
                        className="px-2 py-1 bg-gray-100 text-gray-600 text-sm rounded"
                      >
                        {tag}
                      </span>
                    ))}
                  </div>
                  <div className="text-sm text-gray-500">
                    由 {post.author} 发布于{' '}
                    {new Date(post.createdAt).toLocaleDateString()}
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

export default TrackDiscussion;